<template>
    <div class="orderList">

        <el-form v-if="isMore" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="时间范围" class="formRight">
                <el-date-picker size="mini" v-model="formInline.timeFrame" type="daterange" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleGetOrderList">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="交易状态" class="formRight">
                <el-select v-model="formInline.transition" size="mini" :disabled="isDisabled" placeholder="请选择交易状态"
                    style="width:150px;" @change="handleGetOrderList">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待付款" value="1"></el-option>
                    <el-option label="交易成功" value="2"></el-option>
                    <el-option label="交易关闭" value="3"></el-option>
                    <el-option label="已到期续费" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系统" class="formRight">
                <el-select v-model="formInline.system" size="mini" placeholder="请选择系统" style="width:150px;" @change="handleGetOrderList">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-if="SystemSelect.length > 0" v-for="item in SystemSelect" :key="item.id" :label="item.commodityName" :value="item.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="倒计时时间" class="formRight" @change="handleGetOrderList">
                <el-select v-model="formInline.countdownTime" size="mini" placeholder="请选择倒计时" style="width:150px;" @change="handleGetOrderList">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="7天内到期" value="7"></el-option>
                    <el-option label="15天内到期" value="15"></el-option>
                    <el-option label="1个月内到期" value="30"></el-option>
                    <el-option label="3个月内到期" value="90"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-row class="elRow">
            <el-col :span="6">
                <label>商品</label>
            </el-col>
            <el-col :span="4">
                <label>开始时间</label>
            </el-col>
            <el-col :span="4">
                <label>结束时间</label>
            </el-col>
            <el-col :span="3">
                <label>倒计时</label>
            </el-col>
            <el-col :span="2">
                <label>单价</label>
            </el-col>
            <el-col :span="2">
                <label>数量</label>
            </el-col>
            <el-col :span="3">
                <label>交易操作</label>
            </el-col>
        </el-row>

        <div class="allBatch clearFix">
            <div class="allwarp">
                <el-checkbox v-model="allChecked" @change="handleCheckedAll">全选</el-checkbox>
                <el-button type="text" style="margin-left:20px;margin-right:10px;" v-if="false">批量支付</el-button>
                <el-button type="text" style="color: #E32424; margin-left:20px;" @click="handleDatchOrderNumber">批量删除</el-button>
            </div>
            <div class="upDownBtn" v-if="false">
                <el-button plain size="mini" @click="--page">上一页</el-button>
                <el-button type="primary" plain size="mini" @click="++page">下一页</el-button>
            </div>
        </div>

        <div class="listWarp">
            <div class="warpInner" v-if="userOrderList.length > 0" v-for="(OrderList, index) in userOrderList" :key="index">
                <div :class="OrderList.status == 1?'lsit unpaidBorder':'lsit paidBorder'">
                    <div class="head">
                        <el-checkbox v-model="OrderList.ischeck" @change="handleSystemChange(OrderList)">{{OrderList.createTime}}</el-checkbox>
                        <label class="orderNum">订单号：{{OrderList.orderNo}}</label>
                        <label v-if="OrderList.status === 1">待付款</label>
                        <label v-if="OrderList.status === 2">交易成功</label>
                        <label v-if="OrderList.status === 3">交易关闭</label>
                        <label v-if="OrderList.status === 4">已到期</label>
                        <label class="btnDetail" @click="handleIsDetails(OrderList)">订单详情</label>
                        <i class="el-icon-delete delete" v-if="OrderList.status !== 1" @click="handleDeleteOnOrder(OrderList.orderNo)"></i>
                    </div>

                    <div class="childrenList" v-for="(list, index) in OrderList.titleList" :key="index">
                        <div class="childrenHead">
                            <label>{{list.titleList}}</label>
                        </div>
                        <el-row class="childrenElRow" v-for="(item, index) in list.children" :key="index">

                            <el-col :span="6" class="childrenElCol">
                                <div class="shopDetail clearFix">
                                    <div class="cover" @click="$router.push({path:'/detail',query:{id:item.commodityId}})">
                                        <el-image :src="item.detailCover?BaseUrl+item.detailCover:src" style="width:100%; height:100%;">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>

                                    <div class="detail">
                                        <h3>{{item.detailName}}</h3>
                                        <p v-if="item.beOverdue == 1">服务方式：免费</p>
                                        <p v-if="item.beOverdue == 2">服务方式：包月</p>
                                        <p v-if="item.beOverdue == 3">服务方式：包年</p>
                                        <P v-if="item.subjectName">
                                            <span>{{item.subjectName}}</span>
                                            <el-divider direction="vertical"></el-divider>
                                            <span>{{item.gradeName}}</span>
                                            <el-divider direction="vertical"></el-divider>
                                            <span>{{item.versionName}}</span>
                                        </P>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <label>{{item.payTime}}</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <label>{{item.lastTime}}</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="3" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <label>{{item.allDayTimes}}/天</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="2" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <label>&yen; {{item.projecetPrice}}</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="2" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <label>{{item.payCount}}</label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="3" class="childrenElCol">
                                <div class="flexWarp">
                                    <div class="flexContent">
                                        <div class="flexbtn" v-if="item.status == 3 " style="margin-bottom: 10px;">
                                            <el-button type="primary" size="mini" @click="handleContinueBuy(OrderList.orderNo)" >再次购买</el-button>
                                        </div>
                                        <div class="flexbtn" v-if="item.status == 4" style="margin-bottom: 10px;">
                                            <el-button type="primary" size="mini" @click="handleContinueBuy(OrderList.orderNo)">立即续费</el-button>
                                        </div>
                                        <div class="flexbtn" v-if="item.status != 1 && item.flag == 0" style="margin-bottom: 10px;">
                                            <el-button type="primary" size="mini" plain @click="handleCommentVisible(item.commodityId,OrderList.orderNo)">立即评论</el-button>
                                        </div>
<!--                                        <div class="flexbtn" v-if="item.status != 1 && item.subjectName">-->
<!--                                            <el-button type="primary" size="mini" plain @click="handleGoService(item.menuurl)">进入课堂</el-button>-->
<!--                                        </div>-->
                                        <div class="flexbtn" v-if="item.status == 2 ">
                                            <el-button type="text"  @click="handleGoService(item.menuurl)">进入服务</el-button>
                                        </div>
                                        <div class="flexbtn" v-if="item.status != 1 &&  item.flag != 0">
                                            <span>已评论</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="totalPrice">
                    <div class="price">
                        实付款：<label>&yen; {{OrderList.totalPrice}}</label>
                    </div>
                    <div class="btn" v-if="OrderList.status == 1">
                        <el-button type="primary" size="mini"  @click="handleContinueBuy(OrderList.orderNo)">立即付款</el-button>
                        <el-button type="danger" plain size="mini" @click="handleCancelOrder(OrderList.orderNo)">取消订单</el-button>
                    </div>
                </div>
            </div>

            <!--订单为空时展示-->
            <div class="cartSpace" v-if="userOrderList.length < 1">
                <i class="iconfont iconempty"></i>
                <span>哎呀~ 这里空空的。</span>
                <el-button type="text" @click="$router.push({path:'/'})">去逛逛</el-button>
            </div>
        </div>

        <div class="block" v-if="userOrderList.length > 0">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!--取消订单提示框 暂时没有-->
        <el-dialog :visible.sync="cancelDialogVisible" width="450px">
            <div class="tips">
                <i class="el-icon-warning"></i>
                <label>您确定要取消该订单吗？取消订单后，将无法恢复</label>
            </div>
            <el-form :inline="true" class="cancelDialogVisible">
                <el-form-item label="请选择取消订单的理由：" class="formRight">
                    <el-select v-model="cancelOrder" size="mini" placeholder="请选择交易状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="待付款" value="1"></el-option>
                        <el-option label="交易成功" value="2"></el-option>
                        <el-option label="交易关闭" value="3"></el-option>
                        <el-option label="已到期续费" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="cancelDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="评论" :visible.sync="commentVisible" width="30%" center>
            <el-form ref="commentForm" :model="commentForm" label-width="80px">
                <el-form-item label="星级：" class="commentStar">
                    <i :class="index <= commentForm.star?'iconfont iconcollection-fill':'iconfont iconcollection'" v-for="index in realStar" :key="index" @click="handleCommentStar(index)"></i>

                </el-form-item>
                <el-form-item label="内容：">
                    <el-input type="textarea" :rows="4" v-model="commentForm.comment" maxlength="200" show-word-limit placeholder="在这输入您的评论"></el-input>
                 </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleCommentOrder" size="mini">立即评论</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
